<script setup>
//icon插图
import {
  Delete,
  Edit,
  Search,
  Refresh
} from '@element-plus/icons-vue'
import {  onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus'
import axios from 'axios';
const list = ref([])
const name=ref('')
const postCode=ref('')
const status=ref('')


const isDialog = ref(false)
const isConfirm = ref(false)
let pt = reactive({})
const title = ref('')
const total=ref(0)
const current=ref(1)
const size=ref(5)
const pages=ref(0)





//渲染
const render =async ()=>{
  let sysPost = {
   name:name.value,
   postCode:postCode.value,
   status:status.value
  }
  let res =await axios({
    url:`http://localhost:8080/sysPost/${current.value}/${size.value}`,
    method:'get',
    params:sysPost
  })
   console.log(res);
   list.value = res.data.data.records
   total.value = res.data.data.total
   pages.value = res.data.data.pages
}
  // 翻页
  const handleCurrentChange =async (number) => {
    current.value = number
    render()  
  } 
  // 搜索
  const search = () => {
    render()
  }
  // 重置
  const refresh = () => {
    name.value = ''
    postCode.value = ''
    status.value = ''
    render()  
  }
//状态开关
const changeSwitch = async (post) =>{
  let res = await axios({
    url:`http://localhost:8080/sysPost`,
    method:'put',
    data:post 
  })
  ElMessage({
    message: '成功',
    type: 'success',
    plain: true,
  })
}
onMounted(()=>{
  render()
})

//新增和修改
const save_update = (postMange)=>{
 isDialog.value = true
 if(postMange.id) for(let key in postMange) pt[key] = postMange[key]
    
    if(postMange.id){
      // 修改
      title.value = '修改'
    }else{
      for(let key in pt) pt[key] = null
      // 新增
      title.value = '添加'
    }
}
const save_update_confirm = async ()=>{
    if(pt.id){
      let res = await axios({
        url:'http://localhost:8080/sysPost',
        method:'put',
        data:pt
      })
    }else{
      let res = await axios({
        url:'http://localhost:8080/sysPost',
        method:'post',
        data:pt
      })
    }
    isDialog.value = false
    render()
  }
  //删除
  const del = async (id)=>{
    isConfirm.value = true
    pt.id = id
  }
  const delConfirm = async ()=>{
    let res = await axios({
      url:`http://localhost:8080/sysPost/${pt.id}`,
      method:'delete'
    })
    isConfirm.value = false
    if(res.data.flag){
      render()
    }
    pt.id = ''
  }
</script>

<template>
  <div>  
    <table class="table-input" style="border-collapse: collapse; border: 1px ridge;width: 100%;height: 100px;">
<!-- 搜索框 -->
<el-row :gutter="15" class="input-row">
<el-col :span="6" >
  <el-form-item label=" 岗位名称 " style="font-size: 20px;font-weight: 600;"> 
    <el-input placeholder="岗位名称" v-model="name"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="6" >
  <el-form-item label=" 岗位编码 " style="font-size: 20px;font-weight: 600;"> 
    <el-input placeholder="岗位编码" v-model="postCode"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="6" >
  <el-form-item label=" 状态 " style="font-size: 20px;font-weight: 600;"> 
    <el-input placeholder="状态" v-model="status"></el-input>
    </el-form-item>
  </el-col>
</el-row>

<el-row class="btn-row" v-slot="scoped">
  <el-button type="primary" :icon="Search" @click="search"><Span>搜索</Span></el-button>
  <el-button type="default" :icon="Refresh" @click="refresh">重置</el-button>
  
</el-row>

  </table>
</div>


  <div class="btn-div">
    <table  style="border-collapse: collapse; border: 1px ridge;width: 100%;height: 50px;">
    <el-button class="table-btn" type="success" @click="save_update">+ 添加</el-button>
  </table>
  </div>
 


  <!-- 表格 -->
    <el-table :data="list" border style="width: 100%" empty-text="暂无数据">
    <el-table-column prop="id" label="序号" width="70" />
    <el-table-column prop="name" label="岗位名称" width="300" />
    <el-table-column prop="postCode" label="岗位编码" width="300" />
    <el-table-column prop="status" label="状态" width="150" v-slot="scoped" >
      <el-switch  v-model="scoped.row.status" :active-value="1" :inactive-value="0" @click="changeSwitch(scoped.row)"></el-switch>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" width="300" :formatter="timeFormatter"/>
    <el-table-column label="操作" width="180" v-slot="scope">
      <el-button type="primary" :icon="Edit"  @click="save_update(scope.row)"/>
      <el-button type="danger" :icon="Delete"  @click="del(scope.row.id)"/>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="current"
      v-model:page-size="size"
      :page-sizes="[5, 10, 15, 20]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
    />
  </div>


<!-- 添加和修改弹窗 -->
  <el-dialog v-model="isDialog" :title="title" width="500">
      <el-form-item label="岗位名称" :label-width="100">
        <el-input v-model="pt.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="岗位编码" :label-width="100">
        <el-input v-model="pt.postCode"  autocomplete="off" />
      </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isDialog = false">取消</el-button>
        <el-button type="primary" @click="save_update_confirm">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>

<!-- 删除 -->
  <el-dialog
    v-model="isConfirm"
    title="温馨提示"
    width="500"
  >
    <span>确定要删除吗?</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isConfirm = false">取消</el-button>
        <el-button type="primary" @click="delConfirm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>

 




</template>


<style scoped>
.el-pagination{
  margin-top: 20px;
}
.el-table{
  margin-top: 30px;
}
.demo-border .text {
  width: 15%;
}
.demo-border .line {
  width: 70%;
}
.demo-border .line div {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--el-border-color);
}
.demo-border .line .dashed {
  border-top: 2px dashed var(--el-border-color);
}

.el-col{
  margin-top: 20px;
  margin-left: 10px;
}
.btn-row{
  margin-left: 10px;
  margin-bottom: 10px;
}
.btn-div{
  margin-top: 20px;
}
.table-btn{
  margin-top: 10px;
  margin-left: 10px;
}
.demo-pagination-block{
  margin-left: 380px;
  margin-top: 20px;

}
</style>
